import React from 'react';
import {Layout, Select, DatePicker, Input, Button, Table, Modal, Radio, message, Menu, Dropdown} from 'antd'
import WithMon from './with-mon'
import {FormOutlined, DeleteOutlined} from '@ant-design/icons';
import './Voucher.css'
import  '../MoneyStatistics/AddInput.css'
import axios from "../../../util/http";
import * as url from "../../../util/api";

const { Option } = Select;
const { RangePicker } = DatePicker;
const { Search } = Input;
// let selectValue = '';
function handleChange(value) {
    console.log(`selected ${value}`);
    // selectValue =`selected ${value}`
    // console.log(selectValue)
}
let divStyle ={
    width:'300px',
    border:'1px solid #ccc',
    height: '30px',
    lineHeight:'30px',
    backgroundColor: '#FFFFFF',
    padding:'0 10px',
    cursor: 'pointer',
}
function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
    // console.log(123)
    // btnPosition.visibility='visible'
}
//其他收支
class OtherPayments extends React.Component {
    constructor(props){
        super(props)
        this.state={
            visible: false ,//新增其他支出
            visibleA:false ,//新增费用类型
            visibleB:false ,//确认删除
            visibleC:false ,//确认修改
            feiYong:'123',
            value: 1,
            valueA:'',
            DataSelect:'',//费用类型
            btnPosition:{
                bottom:'-120px',
                visibility:'hidden',
            },
            selectData:[
                {title:'医用保险'},
                {title:'物业'},
                {title:'租金'},
            ],
            getData:[],
            nextData:[],
            orderNum:'',//单号
            liushuiNum:'',//流水号
            paymentType:'',//收支类型
            costType:'',//费用类型
            costTime:'',//费用时间
            paymentMethod:'',//支付方式
            paymentMoney:'',//金额
            paymentNum:'',//结算账户
            notes:'',//备注
        }
    }
    componentDidMount() {
        axios({
            url:url.PaymentOrder,
            method:'get',
        }).then(res=>{
            // console.log(res.data.data)
            this.setState({
                getData:res.data.data,
                nextData:res.data.data,
            })
        })
    }
    searchData=(value)=>{
        // console.log(value)
        let Data = this.state.getData
        if (value===''){
            let next = this.state.nextData
            this.setState({
                getData:next
            })
        } else{
            let newData = Data.filter(item=>{
                return item.orderNum===value
            })
            this.setState({
                getData:newData
            })
        }

    }
     modify=(text,record,e)=> {
        // e.preventDefault()
         let {orderNum,liushuiNum,paymentType,costType,costTime,paymentMethod,paymentMoney,paymentNum,notes}=text
         this.setState({
             visibleC: true,
             orderNum:orderNum,//单号
             liushuiNum:liushuiNum,//流水号
             valueA:paymentType,//收支类型
             DataSelect:costType,//费用类型
             costTime:costTime,//费用时间
             value:paymentMethod,//支付方式
             paymentMoney:paymentMoney,//金额
             paymentNum:paymentNum,//结算账户
             notes:notes,//备注
         });
    }
    deletePay=(text,record,e)=> {
        // e.preventDefault()
        this.setState({
            visibleB: true,
        });
    }
     dropdownMenu=(text, record)=>{
        const menu = (
            <Menu>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" onClick={this.modify.bind(this,text,record)} >
                        <FormOutlined style={{marginRight:'10px'}}/>修改
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" onClick={this.deletePay.bind(this,text,record)}>
                        <DeleteOutlined style={{marginRight:'10px'}}/>删除
                    </a>
                </Menu.Item>
            </Menu>
        );
        return(
            <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                    . . .
                </a>
            </Dropdown>
        )
    }
    unitl = (data)=>{
        let chang = data.length-1
       return  data.map((item,i)=>{
            // console.log(item)
            if (i===chang){
                // console.log(item.title,123)
            return  <div style={divStyle} onClick={this.changeValue.bind(this,item.title)}  key={item.title}>{item.title}</div>
            } else{
                return  <div style={divStyle} onClick={this.changeValue.bind(this,item.title)}  key={item.title}>{item.title}</div>
            }
        })
    }
    changeValue=(dataTitle,e)=>{
        let dataA= this.dataA
        dataA.defaultValue= dataTitle
        this.ChangeV()
        this.setState({
            DataSelect:dataA.defaultValue
        })
    }
    showModal = () => {
        this.setState({
            visible: true,
            orderNum:'',//单号
            liushuiNum:'',//流水号
            valueA:'',//收支类型
            DataSelect:'',//费用类型
            costTime:'',//费用时间
            value:'',//支付方式
            paymentMoney:'',//金额
            paymentNum:'',//结算账户
            notes:'',//备注
        });
    };
    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    //删除
    handleOkB = e => {
        // console.log(e);
        this.setState({
            visibleB: false,
        });
        message.success('删除成功');
    };
    handleCancelB = e => {
        console.log(e);

        this.setState({
            visibleB: false,
        });

    };
    //修改
    handleOkC = e => {
        // console.log(e);
        this.setState({
            visibleC: false,
        });
        message.success('修改成功');
    };
    handleCancelC = e => {
        console.log(e);

        this.setState({
            visibleC: false,
        });

    };
    handleOkA = (e) => {
        // console.log(e.target.defaultValue);
        console.log(this.Im);
        let Im =this.Im
        Im.value=this.state.feiYong
        if (Im.value!=='') {
            let options = {title:Im.value}

            if (JSON.stringify(this.state.selectData).indexOf(JSON.stringify(options))!==-1){
                message.error('费用类型不可重复')
            }else{
                // this.setState((state)=>{
                //     selectData:state.selectData.push({title:Im.value})
                // });
                let dataGet = this.state.selectData
                // this.setState((state)=>{
                //     return {selectData:state.selectData.push(options)}
                //
                // });
                this.setState({
                    selectData: [...dataGet,options],
                })
                this.setState({
                    visibleA: false,
                })
                message.success('添加成功');

            }
        }
            else{
            message.error('输入框不能为空')
        }
        let x=this.state.selectData
        // console.log(x)
        console.log(this.state.selectData)
       this.unitl(x)
    };
    ChangeFeiYong=(e)=>{

        this.setState({
            feiYong:e.target.value
        })

        // console.log(this.state.feiYong)
        // console.log(this.state.feiYong)
    }
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    handleCancelA = e => {
        console.log(e);

        this.setState({
            visibleA: false,
        });
    };
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };
    onChangeA = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            valueA: e.target.value,
        });
    };
    onChangeX = (title,e) => {
        this.setState({
            [title]: e.target.value,
        });
    };
    addOption =()=> {
        // console.log(123)
        let dataA= this.dataA
        dataA.defaultValue=''
        this.setState({
            DataSelect:dataA.defaultValue,
            visibleA: true,
        })
    }
    ChangeV=()=> {
        // console.log(123)
        let DivA= this.DivA
        if (this.state.btnPosition.visibility==='visible'){
            DivA.style.visibility='hidden'
        }
        else{
            DivA.style.visibility='visible'
        }
        this.setState({
            btnPosition:{visibility:DivA.style.visibility}
        })

        // DivA.style = {
        //     bottom:'-120px',
        //     visibility:'visible',
        // }

    }
    render() {
        const columns = [
            {
                title: '单号',
                dataIndex: 'orderNum',
                align:'center',
            },
            {
                title: '流水号',
                dataIndex: 'liushuiNum',
                align:'center',
            },
            {
                title: '收支类型',
                dataIndex: 'paymentType',
                align:'center',
            },
            {
                title: '费用类型',
                dataIndex: 'costType',
                align:'center',
            },
            {
                title: '费用时间',
                dataIndex: 'costTime',
                align:'center',
            },
            {
                title: '支付方式',
                dataIndex: 'paymentMethod',
                align:'center',
            },
            {
                title: '金额',
                dataIndex: 'paymentMoney',
                align:'center',
            },
            {
                title: '结算账户',
                dataIndex: 'paymentNum',
                align:'center',
            },
            {
                title: '备注',
                dataIndex: 'notes',
                align:'center',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <span>
                {this.dropdownMenu(text, record)}
            </span>
                ),
            },
        ];
        let{feiYong}=this.state
        let datas=this.state.selectData
        console.log(this.state.selectData)
        return (
            <div>
                <Layout style={{backgroundColor:'white',marginTop:'20px'}}>
                    <div className='topBox'>
                        <div className='topLeft'>
                            <Select bordered={false} style={{width:120,}} defaultValue="全部收支"  onChange={handleChange}>
                                <Option value="全部收支">全部收支</Option>
                                <Option value="其他收入">其他收入</Option>
                                <Option value="其他支出">其他支出</Option>
                            </Select>
                            <Select bordered={false} style={{width:140}} defaultValue="全部银行账户"  onChange={handleChange}>

                                <Option value="全部账户">全部账户</Option>
                                <Option value="全部银行账户">全部银行账户</Option>
                                <Option value="现金">现金</Option>
                                <Option value="成都皇家文理">成都皇家文理</Option>
                            </Select>
                            <Select  bordered={false} style={{width:140}} defaultValue="全部费用类型"   onChange={handleChange}>
                                <Option value="全部费用类型">全部费用类型</Option>
                            </Select>
                            <RangePicker style={{width:250,height:30}}/>
                            <Search
                                placeholder="请输入单号/流水号/制单人/备注"
                                onSearch={this.searchData}
                                style={{width:300}}
                            />
                        </div>
                        <div className='topRight'>
                            <Button style={{marginRight:'20px'}}>导出</Button>
                                <Button type="primary" onClick={this.showModal}>新增</Button>
                        </div>
                    </div>
                   </Layout>
                <div style={{marginLeft:'20px'}}>当前统计结果：其他收入<span style={{color:'green'}}>+0.00</span> 其他支出<span style={{color:'red'}}>-0.00</span></div>
                <div className='tableBox'>
                    <Table columns={columns} dataSource={this.state.getData} onChange={onChange} />
                </div>

                <Modal
                    title="新增其他支出"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                >
                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>收支类型</div>
                        <Radio.Group onChange={this.onChangeA} value={this.state.valueA}>
                            <Radio value={'其他收入'}>其他收入</Radio>
                            <Radio value={'其他支出'}>其他支出</Radio>
                        </Radio.Group>
                    </div>

                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>费用类型</div>
                        <div>
                            <div className='SelectFu'>
                                <Select notFoundContent='' key={this.state.DataSelect} ref={select => this.dataA = select} onClick={this.ChangeV} defaultValue={this.state.DataSelect}   style={{ width: 300 }} onChange={handleChange}>
                                </Select>
                                <div ref={Div=>this.DivA = Div} style={this.state.btnPosition} className='ziBtn'>
                                    {this.unitl(datas)}
                                    <div onClick={this.addOption} style={divStyle}>+新增费用类型</div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div className='BoxInput'>
                        <div className='titleInput'>单号</div>
                        <Input style={{width:350}} placeholder='请输入单号' />
                    </div>

                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>费用金额</div>
                        <Input style={{width:350}}   placeholder='请输入费用金额' />
                    </div>

                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>费用时间</div>
                        <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
                    </div>

                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>付款方式</div>
                        <Radio.Group onChange={this.onChange} value={this.state.value}>
                            <Radio value={'现金'}>现金</Radio>
                            <Radio value={'银行转账'}>银行转账</Radio>
                        </Radio.Group>
                    </div>

                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>结算账户</div>
                        <Select defaultValue="" style={{ width: 120 }} onChange={handleChange}>
                            <Option value="中国建设银行深圳市中旅公馆支行">中国建设银行深圳市中旅公馆支行</Option>
                        </Select>
                    </div>

                    <div className='BoxInput'>
                        <div className='titleInput'>备注</div>
                        <textarea name="a" id="" cols="50" rows="4">

                        </textarea>
                    </div>
                    <div>附件 添加附件<span className='contentC'>建议上传订单付款凭证，如汇款单等；附件支持</span></div>
                    <div className='contentC'>JPG,PNG,Word,Excel,Txt格式，大小不超过4M</div>

                </Modal>
                <Modal
                    title="新增费用类型"
                    visible={this.state.visibleA}
                    onOk={this.handleOkA}
                    onCancel={this.handleCancelA}
                    okText="确认"
                    cancelText="取消"
                >
                   费用类型：<Input style={{width:300}} onChange={this.ChangeFeiYong} ref={input=>this.Im=input}  value={feiYong} />
                </Modal>
                <Modal
                    title="删除"
                    visible={this.state.visibleB}
                    onOk={this.handleOkB}
                    onCancel={this.handleCancelB}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确认删除此纪录？</p>
                </Modal>
                <Modal
                    title="修改"
                    visible={this.state.visibleC}
                    onOk={this.handleOkC}
                    onCancel={this.handleCancelC}
                    okText="确认"
                    cancelText="取消"
                >
                    <div className='BoxInput'>
                        <div>单号：{this.state.orderNum}
                        <span style={{marginLeft:'20px'}}>流水号：{this.state.liushuiNum}</span></div>
                    </div>
                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>收支类型</div>
                        <Radio.Group onChange={this.onChangeA} value={this.state.valueA}>
                            <Radio value='其他收入'>其他收入</Radio>
                            <Radio value='其他支出'>其他支出</Radio>
                        </Radio.Group>
                    </div>
                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>费用类型</div>
                        <div>
                            <div className='SelectFu'>
                                <Select notFoundContent='' key={this.state.DataSelect} ref={select => this.dataA = select} onClick={this.ChangeV} defaultValue={this.state.DataSelect}   style={{ width: 300 }} onChange={handleChange}>
                                </Select>
                                <div ref={Div=>this.DivA = Div} style={this.state.btnPosition} className='ziBtn'>
                                    {this.unitl(datas)}
                                    <div onClick={this.addOption} style={divStyle}>+新增费用类型</div>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>费用金额</div>
                        <Input style={{width:350}} onChange={this.onChangeX.bind(this,'paymentMoney')} value={this.state.paymentMoney}   placeholder='请输入费用金额' />
                    </div>
                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>费用时间</div>
                        <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
                    </div>

                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>付款方式</div>
                        <Radio.Group onChange={this.onChange} value={this.state.value}>
                            <Radio value={'现金'}>现金</Radio>
                            <Radio value={'银行转账'}>银行转账</Radio>
                        </Radio.Group>
                    </div>

                    <div className='BoxInput'>
                        <div className='titleInput'><span className='titleRed'>*</span>结算账户</div>
                        <Select value={this.state.paymentNum} style={{ width: 120 }} onChange={handleChange}>
                            <Option value="中国建设银行深圳市中旅公馆支行">中国建设银行深圳市中旅公馆支行</Option>
                        </Select>
                    </div>

                    <div className='BoxInput'>
                        <div className='titleInput'>备注</div>
                        <textarea name="a" id="" cols="50" rows="4" onChange={this.onChangeX.bind(this,'notes')} value={this.state.notes}>

                        </textarea>
                    </div>
                    <div>附件 添加附件<span className='contentC'>建议上传订单付款凭证，如汇款单等；附件支持</span></div>
                    <div className='contentC'>JPG,PNG,Word,Excel,Txt格式，大小不超过4M</div>
                </Modal>
            </div>
        );
    }
}

export default WithMon('其他收支')(OtherPayments);